<template>
    <div class="bg">
        <template>
            123
            <template v-if="chart.bT.length || chart.bZ.length || chart.longitude.length || chart.bulkspeed.length || chart.iontemp.length || chart.protrondensity.length">
                <bTbZChart
                        v-if="needRefresh"
                        id="three-day-bTbZ"
                        height="150px"
                        :xAxisMax="endDt"
                        :xAxisMin="bgnDt"
                        :bTData="chart.bT"
                        :bZData="chart.bZ"
                        :xAxisAxisLabelShow="false"
                        :grid="{top:'10px',bottom:'5px',left:'65px',right:'20px'}"
                />
                <longitudeChart
                        v-if="needRefresh"
                        id="three-day-longitude"
                        height="150px"
                        :xAxisMax="endDt"
                        :xAxisMin="bgnDt"
                        :longitudeData="chart.longitude"
                        :xAxisAxisLabelShow="false"
                        :grid="{top:'10px',bottom:'5px',left:'65px',right:'20px'}"
                />
                <densityChart
                        v-if="needRefresh"
                        id="three-day-density"
                        height="150px"
                        :xAxisMax="endDt"
                        :xAxisMin="bgnDt"
                        :densityData="chart.protrondensity"
                        :xAxisAxisLabelShow="false"
                        :grid="{top:'10px',bottom:'5px',left:'65px',right:'20px'}"
                />
                <speedChart
                        v-if="needRefresh"
                        id="three-day-speed"
                        height="150px"
                        :xAxisMax="endDt"
                        :xAxisMin="bgnDt"
                        :speedData="chart.bulkspeed"
                        :xAxisAxisLabelShow="false"
                        :grid="{top:'10px',bottom:'5px',left:'65px',right:'20px'}"
                />
                <iontempChart
                        v-if="needRefresh"
                        id="three-day-temp"
                        height="150px"
                        :xAxisMax="endDt"
                        :xAxisMin="bgnDt"
                        :iontempData="chart.iontemp"
                        :grid="{top:'10px',bottom:'18px',left:'65px',right:'20px'}"
                />
            </template>
            <div v-else style="height:470px" v-loading="!needRefresh" element-loading-background="rgba(255, 255, 255, 0.6)"></div>
        </template>
    </div>
</template>
<script>
import bTbZChart from './bTbZChart.vue';
import longitudeChart from './longitudeChart.vue';
import densityChart from './densityChart.vue';
import speedChart from './speedChart.vue';
import iontempChart from './iontempChart.vue';
import { post } from "../../../utils/request"
export default {
    components:{
        bTbZChart,
        longitudeChart,
        densityChart,
        speedChart,
        iontempChart
    },
    data() {
        return {
            chart: {
                bT: [],
                bZ: [],
                longitude: [],
                bulkspeed: [],
                iontemp: [],
                protrondensity: []
            },
            // 刷新组件
            needRefresh:false,
            bgnDt: null,
            endDt: null
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        init() {
            this.chart = {
                bT: [],
                bZ: [],
                longitude: [],
                bulkspeed: [],
                iontemp: [],
                protrondensity: []
            },
            this.getSolarwindchart()
        },
        //加减日期
        addDate(date, days) {
            var d = new Date(date);
            d.setDate(d.getDate() + days);
            var m = d.getMonth() + 1;
            return `${d.getFullYear()}-${m > 9 ? m : '0' + m}-${d.getDate() > 9 ? d.getDate() : '0' + d.getDate()}`;
        },
        // //处理日期时间
        // formatDatetime(str, getTime) {
        //     var str0 = ""
        //     if (str.slice(0, 4)) {
        //         str0 += str.slice(0, 4)
        //         if (str.slice(4, 6)) {
        //             str0 += '-' + str.slice(4, 6)
        //             if (str.slice(6, 8)) {
        //                 str0 += '-' + str.slice(6, 8)
        //                 if (str.slice(8, 10)) {
        //                     str0 += ' ' + str.slice(8, 10)
        //                     if (str.slice(10, 12)) {
        //                         str0 += ':' + str.slice(10, 12)
        //                     }
        //                 }
        //             }
        //         }
        //     }
        //     if (getTime) {
        //         return (new Date(str0.replace(new RegExp("-", "gm"), "/"))).getTime(); //得到毫秒数
        //     } else {
        //         return str0
        //     }
        // },
        //从后端获取太阳风曲线图
        async getSolarwindchart() {
            try {
                // let dtime = this.formatDatetime(this.dialog.datetime)
                this.needRefresh=false
                var params = {};
                post(
                    "/api/idatamanage/dataService/querySolarWind",
                    params
                ).then((res) => {

                    console.log("数据1", res.data.data.mag);
                    console.log("数据1", res.data.data.sw);
                    this.bgnDt = res.data.data.mag[0].dayHhmm;
                    this.endDt = res.data.data.mag[res.data.data.mag.length - 1].dayHhmm;
                    this.endDt = this.addDate(this.endDt, 1) + " 00:00:00";
                    res.data.data.mag.forEach((v) => {
                        this.chart.bT.push([v.dayHhmm, v.bT]);
                        this.chart.bZ.push([v.dayHhmm, v.bZ]);
                        this.chart.longitude.push([v.dayHhmm, v.longitude]);
                    });
                    res.data.data.sw.forEach((v) => {
                        this.chart.protrondensity.push([v.dayHhmm, v.protrondensity]);
                        this.chart.bulkspeed.push([v.dayHhmm, v.bulkspeed]);
                        this.chart.iontemp.push([v.dayHhmm, v.iontemp])
                    })
                    console.log(this.chart);

                }, (err) => {
                    console.log(err);
                });
                this.needRefresh=true
            } catch (error) {/**/
            }
        },
        getLastDate(dt) {

        }
    }
}
</script>
<style scoped>
p{
    color: red;
}
.bg{
    background-color: black;
    height: 100%;
}
</style>